<template>
  <div id="functionPage">
    <HeadNav
      type="organize"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="organize" sort="function"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container">
            <div class="model-container">
              <div class="model-bg" style="padding: 0 15px">
                <a-tabs activeKey="1">
                  <a-tab-pane key="1" tab="功能订购"></a-tab-pane>
                </a-tabs>
              </div>
            </div>
            <div
              class="clearfix"
              style="min-height: 600px"
              v-if="powerType == 1"
            >
              <div
                class="function-list float-left"
                v-for="(item, index) in modelList"
                :key="index"
              >
                <div class="function-tags" v-if="item.is_order == 1">
                  <div class="text">已订购</div>
                  <div class="arrow"></div>
                  <div class="shadow"></div>
                </div>
                <div>
                  <img :src="item.image" width="80px" height="80px" alt="" />
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="desc">{{ item.desc }}</div>
                <div>
                  ￥<span class="price">{{ item.price }}</span
                  ><span v-if="item.type == 1">/年</span
                  ><span v-if="item.type == 2">/月</span
                  ><span v-if="item.type == 3">/次</span>
                </div>
                <div class="btn">
                  <a-button
                    type="primary"
                    style="width: 90px"
                    v-if="(item.is_order == 0 || item.is_order == -1) && item.state == 1"
                    @click="openModal(item, index)"
                    >订购</a-button
                  >
                  <a-button
                    @mouseover="mouseOver(item, index)"
                    @mouseout="mouseOut(item, index)"
                    style="width: 90px; border-color: #4576db !important"
                    @click="openModal(item, index)"
                    v-if="item.is_order == 1 && item.price > 0 && item.state == 1"
                    >{{ item.text }}</a-button
                  >
                  <a-button
                    style="width: 90px; border-color: #4576db !important"
                    @click="openModal(item, index)"
                    v-if="item.is_order == 1 && item.price == 0 && item.state == 1"
                    >免费</a-button
                  >
                  <a-button
                    type="primary"
                    style="width: 90px"
                    v-if="item.state == 0"
                    >敬请期待</a-button
                  >
                </div>
                <div class="end" v-if="item.is_order == 1">
                  有效期至{{ item.end_date }}
                </div>
              </div>
            </div>
            <div class="model-container" v-else>
              <div class="model-bg" style="height: 600px">
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
    <!-- 详情弹层 -->
    <a-modal
      v-model="handleModal"
      width="600px"
      destroyOnClose
      :footer="null"
      :title="null"
      on-ok="handleOk"
    >
      <div class="popup">
        <div class="option">
          <span class="lable">功能名称</span>
          <div class="normal">{{ modelInfo.title }}</div>
        </div>
        <div class="option">
          <span class="lable">档位</span>
          <div class="normal">
            <a-radio-group v-model="modelInfo.level" size="small">
              <a-radio
                :value="item.level_id"
                v-for="(item, index) in modelInfo.levels"
                :key="index"
                disabled
                >{{ item.level_name }}</a-radio
              >
            </a-radio-group>
          </div>
        </div>
        <div class="option">
          <span class="lable">订购价格</span>
          <div class="normal">
            {{ modelInfo.dprice }}<span v-if="modelInfo.type == 1">/年</span
            ><span v-if="modelInfo.type == 2">/月</span
            ><span v-if="modelInfo.type == 3">/次</span>
          </div>
        </div>
        <div class="option">
          <span class="lable">当前状态</span>
          <div class="normal">
            <span v-if="modelInfo.is_order == 1">【已订购】</span>
            <span v-else-if="modelInfo.is_order == 0">【未订购】</span>
            <span v-else-if="modelInfo.is_order == -1">【已过期】</span>
          </div>
        </div>
        <div class="option">
          <span class="lable" style="vertical-align: top; margin-top: 7px"
            >有效期</span
          >
          <div class="normal">
            <span v-if="modelInfo.start_date"
              >{{ modelInfo.start_date }} 至 {{ modelInfo.end_date }}</span
            >
            <span v-else>--</span>
          </div>
        </div>
      </div>
      <div style="text-align: center;padding-bottom:30px;">
        <a-button key="submit" disabled type="primary" style="width: 80px;background-color:#BACCF2 !important;border-color:#BACCF2 !important;"
          >确定</a-button
        >
        <span style="font-size: 12px; color: #7789af; margin-left: 5px"
          >暂未开通线上付款，如需订购请与博道人员联系</span
        >
      </div>
    </a-modal>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/admin/function.scss"></style>
<script>
import { ORGANIZATION_PERMISSION_GETS } from "../../apis/admin.js";
export default {
  data() {
    return {
      powerType: 1,
      isLoading: true,
      modelList: [],
      modelInfo: {},
      handleModal: false,
    };
  },
  mounted() {
    this.getFunction();
  },
  methods: {
    // 功能模块列表
    async getFunction() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await ORGANIZATION_PERMISSION_GETS(data);
      if (res.code == 0) {
        this.powerType = 1;
        this.modelList = [];
        res.data.map((value, key) => {
          let _obj = value;
          _obj.text = "已订购";
          if(value.start_date){
            _obj.effective = this.$moment(value.start_date.replace(/年|月/g, "-").replace(/日/, "")).diff(this.$moment(), 'days')
          }else{
            _obj.effective = 0;
          }
          this.modelList.push(_obj);
        });
        this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.powerType = 0;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    mouseOver(item, index) {
      //   console.log(1111, index);
      this.modelList = this.modelList.map((value, key) => {
        if (index == key) {
          value.text = "续订";
        }
        return value;
      });
    },
    mouseOut(item, index) {
      //   console.log(222, index);
      this.modelList = this.modelList.map((value, key) => {
        if (index == key) {
          value.text = "已订购";
        }
        return value;
      });
    },
    openModal(item, index) {
      let _obj = item;
      if (item.is_order == 1) {
        _obj.status = 1;
      } else {
        _obj.status = 0;
      }
      _obj.dprice = _obj.price;
      _obj.is_order = item.is_order;
      item.levels.map((value,key)=>{
        if(value.price == item.price){
          _obj.level = value.level_id;
        }
      })
      this.modelInfo = _obj;
      // console.log(this.modelInfo)
      this.handleModal = true;
    },
    publisherChange() {
      this.isLoading = true;
      this.getFunction();
    },
  },
};
</script>